@import "var";

$ctrl-corner-size: 4px;
$ctrl-corner-offset: calc(($ctrl-corner-size + 2px) / 2);
$cursors: default, nwse-resize, nesw-resize, ns-resize, ew-resize;
@each $cursor in $cursors {
  .cursor-#{$cursor} {
    cursor: url("../assets/cursor-#{$cursor}.png") 16 16, $cursor;
  }
}

.easy-design {
  @include css-vars {
    --design-bg-color: #{themed('designBgColor')};
    --stage-bg-color: #{themed('stageBgColor')};
    --text-color: #{themed('textColor')};
    --primary-color: #{themed('primaryColor')};
    --primary-color-70: #{themed('primaryColor70')};
  }

  position: relative;
  overflow: hidden;

  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background-color: var(--design-bg-color);
  background-image: url("../assets/transparent-bg.svg");
  color: var(--text-color);

  user-select: none;

  .node-wrapper {
    position: absolute;
    box-sizing: border-box;

    > * {
      width: 100%;
      height: 100%;
    }
  }

  .node-root {
    background-color: var(--stage-bg-color);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  &.editable {

    .ctrl-layer {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;

      > * {
        pointer-events: none;
      }

      .bounds-hover, .bounds-border, .bounds-modifier {
        position: absolute;
        border: 1px solid var(--primary-color);
        visibility: hidden;
      }

      .bounds-borders, .bounds-modifiers {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }

      .bounds-hover {
        border-width: 2px;
      }

      .bounds-modifier {
        .ctrl-handler {
          pointer-events: auto;
          position: absolute;
        }

        .corner {
          background-color: white;
          width: $ctrl-corner-size;
          height: $ctrl-corner-size;
          border: 1px solid var(--primary-color);

          &.top-left {
            left: calc(-1 * $ctrl-corner-offset);
            top: calc(-1 * $ctrl-corner-offset);
          }

          &.top-right {
            right: calc(-1 * $ctrl-corner-offset);
            top: calc(-1 * $ctrl-corner-offset);
          }

          &.bottom-left {
            left: calc(-1 * $ctrl-corner-offset);
            bottom: calc(-1 * $ctrl-corner-offset);
          }

          &.bottom-right {
            right: calc(-1 * $ctrl-corner-offset);
            bottom: calc(-1 * $ctrl-corner-offset);
          }
        }

        .side {
          //background-color: #ff000088;

          &.top {
            left: 0;
            right: 0;
            top: -$ctrl-corner-offset;
            height: $ctrl-corner-size;
          }

          &.bottom {
            left: 0;
            right: 0;
            bottom: -$ctrl-corner-offset;
            height: $ctrl-corner-size;
          }

          &.left {
            left: -$ctrl-corner-offset;
            top: 0;
            bottom: 0;
            width: $ctrl-corner-size;
          }

          &.right {
            right: -$ctrl-corner-offset;
            top: 0;
            bottom: 0;
            width: $ctrl-corner-size;
          }
        }
      }

      .select-box {
        pointer-events: none;
        position: absolute;
        border: 1px solid var(--primary-color);
        background-color: var(--primary-color-70);
        z-index: 1;
        visibility: hidden;
        box-sizing: border-box;

        &.active {
          visibility: visible;
        }
      }

      &.box-selecting {
        .ctrl-handler{
          pointer-events: none;
        }
      }

      &.modifying-bounds {
        .bounds-hover {
          visibility: hidden !important;
        }
      }
    }

    &.drag-mode {
      cursor: grab;

      &.dragging {
        cursor: grabbing;
      }

      .ctrl-layer {
        .bounds-hover, .bounds-modifier, .bounds-border {
          visibility: hidden !important;
        }
      }
    }

    .node-wrapper {
      &.node-root {
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
        left: unset;
        top: unset;
        width: unset;
        height: unset;
      }
    }
  }
}
